/* Reference:

!!! NOTICE !!!
These are used as javascript selectors, feel free to alter the css, but do not change the names.

*** General ***
 * #flash_cont	- flashdata container, margin set to 0 by js, blinds up after 5 seconds
 * #xxx_toggle	- have class .on or .off to display toggle status

 * #admin		- admin tools box

*** Popups ***
 * .sp_container - main popup container, wraps all popups


*** Editor Popups ***
 * .editor						- default editor container class
 * .editor_form, #sp_form		- default editor form class, id
 * .editor_field, 				- default one line editor field class, id
		#sp_edit_field
 * #update_link					- editor submit button
 * #cancel_link					- editor cancel button		//yes, they are buttons

 * Used to display inline editors for the respective db field:
		#forum_title
		.cat_name
		.forum_title
		.forum_title
		.forum_description
		.topic_title


*** Confirmation Popups ***
 * .confirm_container	- overwritten default popup container (sp_container)
 * .conf				- confirmation container
 * #confirm_link		- a clone of the link you initially hit, click event not stopped
 * #cancel_link			- closes the editor
 * .delete_confirm		- hook to display confirmation popups for a link:


*/

.sp_container {
	color: red;
	font-size: 100%;
	width: 10em;
	height: 3em;
	z-index: 500;
	background-color: #333;
	text-align:center;
}

.editor input {
	width: auto;
	margin-bottom: 0.2em;
}

.editor #update_link {
	font-family: helvetica;
	font-size: 80%;
	
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: #ddd;
	margin-left: 0.5em;
	cursor: pointer;
	float: left;
}

.editor #cancel_link {
	font-family: helvetica;
	font-size: 80%;
	
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: #ddd;
	margin-right: 0.5em;
	cursor: pointer;
	float: right;
}

.confirm_container {
	font-size: 90%;
	padding: 0.1em;
	border: 1px solid #888;
	position: absolute;
	height: auto;
	width: auto;
	display: block;
	z-index: 500;
	background-color: #fff;
	text-align:center;
	-webkit-box-shadow: 0.2em 0.2em 0.5em #888;
}

.confirm p {
	color: #444;
	margin: 0;
	padding: 0;
	margin-top: 0.1em;
	margin-bottom: 0.3em;
}

.confirm #confirm_link {
	font-family: helvetica;
	font-size: 80%;
	color: #000;
	margin-right: 0.5em;
	cursor: pointer;
}

.confirm #cancel_link {
	font-family: helvetica;
	font-size: 80%;
	color: #000;
	margin-left: 0.5em;
	cursor: pointer;
}

/* Admin Box */

#admin {
	float: right;
	background: #fff;
	padding: 0em;
	width: 20em;
	border: 2px solid #800;
	margin-top: 1em;
	line-height: 1.5em;
	-moz-border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-khtml-border-radius: 0.2em;
	border-radius: 0.2em;
}

#admin_title {
	margin: 0em;
	padding: 0.1em;
	color: #fff;
	background: #800;
}

#admin_handle {
	font-size: 80%;
	font-family: arial;
	margin: 0;
	padding: 0;
	margin-right: 0.5em;
	float: right;
}

#admin_body {
	padding: 0.5em;
}

.tog_cap {
	display: inline-block;
	width: 16em;
}

.on {
	font: 80% arial;
	
	background: #080;
	border: 0.1em inset #080;
	color: #ddd;
	
	display: inline-block;
	text-align: center;
	width: 2.5em;
	line-height: 1.1em;
	-moz-border-radius: 0.4em;
	-webkit-border-radius: 0.4em;
	-khtml-border-radius: 0.4em;
	border-radius: 0.4em;
}

.off {
	font: 80% arial;
	
	background: #900;
	border: 0.1em outset #900;
	color: #ddd;
	
	display: inline-block;
	text-align: center;
	width: 2.5em;
	line-height: 1.1em;
	-moz-border-radius: 0.4em;
	-webkit-border-radius: 0.4em;
	-khtml-border-radius: 0.4em;
	border-radius: 0.4em;
}

.hidden {
	display: none;
}